<template>
  <el-col>
    <el-tabs v-model="activeName" type="card">

      <el-tab-pane label="概况" name="1">
        <el-row>
          <el-col :span="24" class="toolbar">
            <el-card>
              <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间">
              </el-date-picker>

              <el-select v-model="form.val" placeholder="选择类型">
                <el-option label="水" value="1">
                </el-option>
                <el-option label="电能" value="2">
                </el-option>
              </el-select>

              <el-button type="primary">确定</el-button>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">机台</h4>
              <div class="c-t-ct" style="color:#20A0FF;">103 台</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">事件</h4>
              <div class="c-t-ct" style="color:#20A0FF;">1614 件</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">停机</h4>
              <div class="c-t-ct" style="color:#FF4949;">13 台</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">良品率</h4>
              <div class="c-t-ct" style="color:#13CE66;">97.53 百分百</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <div id="chartLDDB" style="width:100%; height:500px;"></div>
            </el-card>
          </el-col>
        </el-row>

      </el-tab-pane>

      <el-tab-pane label="分析预警" name="2">
        <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <div id="chart102_2_1" style="width:100%; height:400px;"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-card class="charts-card">
              <div id="chartYCYJ" style="width:100%; height:350px;"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="charts-card">
              <div id="chartMSYH" style="width:100%; height:350px;"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="charts-card">
              <div id="chartJJMS" style="width:100%; height:350px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="配置规则" name="3">
        <el-card class="charts-card">
          <el-row style="margin-bottom: 10px;">
            <el-col :span="24">
              <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
              </el-input>
              <el-button type="primary">搜索</el-button>
              <el-button type="primary">添加机台</el-button>
              <el-button type="primary">导入</el-button>
              <el-button type="primary">导出</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="tableData_3_1" style="width: 100%">
                <el-table-column prop="name" label="机台名称"></el-table-column>
                <el-table-column prop="ad" label="区域"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="v" label="电压(v)"></el-table-column>
                <el-table-column prop="db" label="噪音(db)"></el-table-column>
                <el-table-column prop="tc" label="投产率(%)"></el-table-column>
                <el-table-column prop="cl" label="产量(件)"></el-table-column>
                <el-table-column label="状态">
                  <template scope="scope">
                    <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="推荐值" width="180">
                  <template scope="scope">
                    <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                    </el-rate>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24">
              <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="charts-card">
          <el-row style="margin-bottom: 10px;">
            <el-col :span="24">
              <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
              </el-input>
              <el-button type="primary">搜索</el-button>
              <el-button type="primary">添加模式</el-button>
              <el-button type="primary">导入</el-button>
              <el-button type="primary">导出</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="tableData_3_2" style="width: 100%">
                <el-table-column prop="name" label="模式名称"></el-table-column>
                <el-table-column prop="ad" label="区域"></el-table-column>
                <el-table-column prop="v" label="消耗能源"></el-table-column>
                <el-table-column prop="db" label="环保等级"></el-table-column>
                <el-table-column prop="tc" label="投产率(%)"></el-table-column>
                <el-table-column prop="cl" label="产量(件)"></el-table-column>
                <el-table-column label="状态">
                  <template scope="scope">
                    <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="推荐值" width="180">
                  <template scope="scope">
                    <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                    </el-rate>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24">
              <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
    </el-tabs>

  </el-col>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      form: {},
      activeName: '1',
      tableData_3_1: [{
        name: '机台1',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '0',
        tj: 4.5,
      }, {
        name: '机台1',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 4.5,
      }, {
        name: '机台1',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '0',
        tj: 4.5,
      }, {
        name: '机台1',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 3.5,
      }, {
        name: '机台1',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '0',
        tj: 2.5,
      }, {
        name: '机台1',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 1.5,
      }, {
        name: '机台1',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 4.9,
      }],
      tableData_3_2: [{
        name: '模式A',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 4.5,
      }, {
        name: '模式A',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 4.5,
      }, {
        name: '模式A',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '0',
        tj: 4.5,
      }, {
        name: '模式A',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 3.5,
      }, {
        name: '模式A',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 2.5,
      }, {
        name: '模式A',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 1.5,
      }, {
        name: '模式A',
        ad: '区域A',
        type: '型号A',
        v: '220',
        db: '78',
        tc: '79.9',
        cl: '679',
        status: '100',
        tj: 4.9,
      }],
      chart102_2_1: null,
      chartLDDB: null,
      chartYCYJ: null,
      chartMSYH: null,
      chartJJMS: null,
    }
  },
  watch: {
    activeName() {
      // console.log('activeName')
      // this.drawCharts()
    }
  },
  methods: {
    drawLDDBChart() {
      let dom = document.getElementById('chartLDDB')

      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartLDDB = echarts.init(dom);

      var colors = ['#5793f3', '#d14a61', '#675bba'];
      this.chartLDDB.setOption({

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['A型号机台', 'B型号机台', 'C型号机台', 'D型号机台', 'E型号机台', '环境数据']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '机台',
            min: 0,
            max: 250,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '环境数据',
            min: 0,
            max: 25,
            position: 'left',
            axisLine: {
              lineStyle: {
                color: colors[2]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '环境数据',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
          {
            name: 'A型号机台',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: 'B型号机台',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: 'C型号机台',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: 'D型号机台',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: 'E型号机台',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
        ]
      });
    },
    drawChart102_2_1() {
      let dom = document.getElementById('chart102_2_1')

      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart102_2_1 = echarts.init(dom);

      let data = [[1.2, 1.6], [2.5, 2], [1.5, 2.8], [1, 1.4], [2.8, 0.6], [1.82, 0.08], [0.87, 2.65], [0.5, 1.84], [2.04, 0.49], [0.65, 1.96], [0.46, 2.71], [2.19, 2.12], [1.21, 1.77], [0.84, 0.95], [2.1, 0.91]];
      let data2 = [[2.79, 0.06], [1.63, 2.64], [2.81, 1.82], [0.38, 2.34], [2.41, 2.11], [0.08, 0.47], [2.24, 2.75], [1.04, 1.13], [1.77, 0.01], [2.81, 2.75], [2.93, 2.39], [2.53, 0.91], [0.42, 1.96], [1.4, 0.67], [0.39, 0.79]]
        , data3 = [[0.92, 2.39], [2.39, 2.19], [0.44, 1.99], [0.76, 1.35], [2.77, 1.37], [1.42, 1.54], [1.81, 1.01], [0.24, 2.8], [0.23, 0.97], [0.61, 2.12], [0.24, 0.07], [0.28, 0.38], [2.26, 0.19], [0.41, 1.23], [2.84, 0.79]]

      // Math.floor(Math.random() * 300) / 100

      this.chart102_2_1.setOption({
        title: {
          text: '品质&环境等级分析',
        },
        grid: {
          left: '3%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          // trigger: 'axis',
          showDelay: 0,
          formatter: function(params) {
            if (params.value.length > 1) {
              return params.seriesName + params.dataIndex + ' :<br/>' +
                '品质等级: ' + params.value[0] +
                '<br/> 环境等级: ' + params.value[1];
            } else {
              return '';
            }
          },
          axisPointer: {
            show: true,
            type: 'cross',
            lineStyle: {
              type: 'dashed',
              width: 1
            }
          }
        },
        toolbox: {
          feature: {
            dataZoom: {},
            brush: {
              type: ['rect', 'polygon', 'clear']
            }
          }
        },
        brush: {},
        legend: {
          data: ['A型号机台', 'B型号机台', 'C型号机台'],
          left: 'center'
        },
        xAxis: [{
          name: '品质',
          type: 'value',
          axisTick: true,
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          name: '环境',
          type: 'value',
          axisTick: true,
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: 'A型号机台',
          type: 'scatter',
          data: data,
        }, {
          name: 'B型号机台',
          type: 'scatter',
          data: data2,
        }, {
          name: 'C型号机台',
          type: 'scatter',
          data: data3,
          markLine: {
            lineStyle: {
              normal: {
                type: 'solid',
                color: '#999'
              }
            },
            data: [{
              yAxis: 1
            }, {
              yAxis: 2
            }, {
              xAxis: 1
            }, {
              xAxis: 2
            }]
          }
        }]
      });
    },
    drawYCYJChart() {
      let dom = document.getElementById('chartYCYJ')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartYCYJ = echarts.init(dom);
      this.chartYCYJ.setOption({
        title: {
          text: '机台联动异常预警'
        },
        tooltip: {},
        legend: {
          data: ['实际情况', '标准情况'],
          align: 'left',
          right: 10
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: '功能1', max: 6500 },
            { name: '功能2', max: 16000 },
            { name: '功能3', max: 30000 },
            { name: '功能4', max: 38000 },
            { name: '功能5', max: 52000 },
            { name: '功能6', max: 25000 }
          ]
        },
        series: [{
          name: '机台联动异常预警',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: [4300, 10000, 28000, 35000, 50000, 19000],
              name: '实际情况'
            },
            {
              value: [5000, 14000, 28000, 31000, 42000, 21000],
              name: '标准情况'
            }
          ]
        }]
      });
    },
    drawMSYHChart() {
      let dom = document.getElementById('chartMSYH')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartMSYH = echarts.init(dom);
      this.chartMSYH.setOption({
        title: {
          text: '机台联动模式优化',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['2016年', '2017年']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['模式A', '模式B', '模式C', '模式D', '模式E', '总计']
        },
        series: [
          {
            name: '2016年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '2017年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      });
    },
    drawJJMSChart() {
      let dom = document.getElementById('chartJJMS')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartJJMS = echarts.init(dom);
      this.chartJJMS.setOption({
        title: {
          text: '品质和经济模式分析',
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['模式A', '模式B', '模式C', '模式D', '模式E', '模式F', '模式G'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '产品优劣',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      });
    },
    // 绘制
    drawCharts() {
      switch (this.activeName) {
        case '1':
          this.drawLDDBChart()
          break;
        case '2':
          this.drawChart102_2_1()
          this.drawYCYJChart()
          this.drawMSYHChart()
          this.drawJJMSChart()
          break;
        default:
          break
      }
    },
    // 刷新
    resizeAllChart() {
      switch (this.activeName) {
        case '1':
          this.chartLDDB.resize()
          break;
        case '2':
          this.chart102_2_1.resize()
          this.chartYCYJ.resize()
          this.chartMSYH.resize()
          this.chartJJMS.resize()
          break;
        default:
          break
      }
    }
  },
  mounted() {
    console.log('mounted')
    this.drawCharts()
    this.$nextTick(() => {
      window.onresize = this.resizeAllChart
    })
  },
  updated() {
    console.log('updated')
    this.drawCharts()
    this.resizeAllChart()
  }
}
</script>
<style scoped>

</style>